<template>
    <div class="bodybox">
        <div class="containerbox">
            <form>
                <h1>添加管理员</h1>
                <div class="listbox">
                    <label>用户名：</label>
                    <input v-model="userInput" placeholder="请输入用户名" required="required" />
                </div>
                <div class="listbox">
                    <label>昵&emsp;称：</label>
                    <input v-model="nickInput" placeholder="请输入昵称" required="required" />
                </div>
                <div class="listbox">
                    <label>密&emsp;码：</label>
                    <input v-model="passwordInput" type="password" placeholder="请输入密码" required="required" />
                </div>
                <div class="listbox">
                    <label>性&emsp;别：</label>
                    <el-radio-group v-model="gender" class="ml-4">
                        <el-radio label="0" size="large" v-model="gender" style="width: 30px;color:#000">女
                        </el-radio>
                        <el-radio label="1" size="large" v-model="gender" style="width: 30px;color:#000">男
                        </el-radio>
                        <el-radio label="2" size="large" v-model="gender" style="width: 30px;color:#000">保密
                        </el-radio>
                    </el-radio-group>
                </div>
                <div class="listbox">
                    <label for="file">头&emsp;像：</label>
                    <input type="file" name="headerImg">
                </div>
                <div class="form_item">
                    <el-button type="primary"  @click="onSign" round size="large">—— 添加 ——</el-button>
                </div>
            </form>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { RequestonLogin } from "@/api/user.js";
const router = useRouter();
let gender = ref('')
let userInput = ref('')
let nickInput = ref('')
let passwordInput = ref('')
const onSign = async () => {
    const headerImgInput = document.querySelector('input[name="headerImg"]')
    let headerImgFile = headerImgInput.files[0]
    let formDate = new FormData()
    formDate.append('username', userInput.value)
    formDate.append('password', passwordInput.value)
    formDate.append('nick', nickInput.value)
    formDate.append('gender', gender.value)
    formDate.append('headerImg', headerImgFile)

    let data = await RequestonLogin(formDate)
    let { resultCode, resultInfo } = data
    if (resultCode == 1) {
        alert('添加成功')
        GoToLogin()
    } else {
        alert("添加失败")
    }
}

</script>
<style lang="scss" scoped>
html {
    height: 100%;
}

.bodybox {
    border-top: 1px solid #fff;
    height: 99%;
    height: 99.9vh;
    background: url('/img/t2.png') no-repeat center/cover;

    .containerbox {
        width: 500px;
        position: relative;
        margin: 0 auto;
        // margin-top: 100px;
        color: #000;
        // display: flex;
        justify-content: center;
        height: 570px;
        form {
            display: inline-block;
            text-align: center;
            position: relative;
            padding: 25px 40px;
            border-radius: 10px;
            border: 1px solid #bbb;
            box-shadow: 3px 3px 3px #999;
            min-width: 300px;
            max-width: 400px;
            a {
                color: #000;
                text-align: center;
            }
            h1 {
                text-align: center;
                padding: 0;
                ;
                margin: 30px 0 30px 0;
            }
            .touxiang {
                height: 30px;
                label {
                    margin-top: -10px;
                }
            }
            .listbox {
                display: flex;
                margin-bottom: 20px;
                padding-right: 50px;
                label {
                    width: 100px;
                    line-height: 45px;
                    text-align: right;
                }
                input {
                    outline: none;
                    text-indent: 10px;
                    width: 260px;
                    border: none;
                    border-radius: 3px;
                    height: 36px;
                }
            }
            .form_item {
                margin: 25px 0;
                vertical-align: middle;
                .subbtn {
                    background-color: rgba(244, 22, 7, 0.5);
                    color: aliceblue;
                    height: 45px;
                    font-size: 20px;
                    cursor: pointer;
                    width: 300px;
                    text-indent: 0px;
                    border-radius: 20px;
                    border: 0px;
                }
            }
        }
    }
}
</style>